<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>安防态势-右侧-图表</title>

        <style>
            html,
            body {
                margin: 0;
                padding: 0;
                color: white;
                width: 1px;
                height: 1px;
            }
        </style>
    </head>
    <body>
        <script src="../../config.js"></script>
        <script src="../../assets/lib/signalr.min.js"></script>
        <script>
            var connection = null
            var web_token = null
            var web_projId = null
            init()

            function init() {
                console.error('初始化页面')
                web_token = Fuck(
                    'func_db',
                    null,
                    'get',
                    JSON.stringify({
                        key: 'web_token',
                        default: ''
                    })
                )
                web_projId = Fuck(
                    'func_db',
                    null,
                    'get',
                    JSON.stringify({
                        key: 'web_projId',
                        default: ''
                    })
                )
                if (!web_token) {
                    console.error('未获取到token，请检查token是否正确')
                }

                // 能耗趋势
                this.CreateOrSetUIPage2('DeviceViewEquipStatistics', 444, -113, 420, 328, window.iotWebConfig?.designUrl + '?code=component_ukVLdDkX4s&token=' + web_token + '&projId=' + web_projId, 1)

                // 最上层
                Fuck('func_html_chrome', 'DeviceViewEquipStatistics', 'set_render_sort', 9999)

                // 事件统计
                this.CreateOrSetUIPage2('SafeViewMessageStatistics', 444, -457, 420, 280, window.iotWebConfig?.designUrl + '?code=component_Kmj5pcJmVD&token=' + web_token + '&projId=' + web_projId, 1)

                // 最上层
                Fuck('func_html_chrome', 'SafeViewMessageStatistics', 'set_render_sort', 9999)

                // 车辆流量
                this.CreateOrSetUIPage2('SafeViewTypeAlarm', 444, -753, 420, 280, window.iotWebConfig?.designUrl + '?code=component_b1vhDyAlTn&token=' + web_token + '&projId=' + web_projId, 1)

                // 最上层
                Fuck('func_html_chrome', 'SafeViewTypeAlarm', 'set_render_sort', 9999)

                // 能耗分项
                this.CreateOrSetUIPage2('SafeViewTypeAlarm2', -24, -113, 420, 280, window.iotWebConfig?.designUrl + '?code=component_gW54JuwSBS&token=' + web_token + '&projId=' + web_projId, 3)

                // 最上层
                Fuck('func_html_chrome', 'SafeViewTypeAlarm2', 'set_render_sort', 9999)

                // 告警事件
                this.CreateOrSetUIPage2('SafeViewAlarmEvent', -24, -409, 420, 625, window.iotWebConfig?.webUrl + '/pages/common/message.html?height=625&pageType=car&token=' + web_token + '&projId=' + web_projId, 3)

                // 最上层
                Fuck('func_html_chrome', 'SafeViewAlarmEvent', 'set_render_sort', 9999)

                initSignalRConnection()
            }

            function initSignalRConnection() {
                // 连接到 SignalR 服务
                connection = new signalR.HubConnectionBuilder()
                    .withUrl(window.iotWebConfig?.iotUrl + '/signalr/messagehub') // 替换为你的 SignalR Hub 路由
                    .configureLogging(signalR.LogLevel.Information) // 可选：配置日志记录级别
                    .build()
                // 开始连接
                connection
                    .start()
                    .then(res => {
                        console.log('message notice signalr连接成功')
                    })
                    .catch(err => {
                        console.log(err.toString())
                    })

                connection.on('AddNewMessageEvent2', res => {
                    console.log('AddNewMessageEvent2 接受到了数据')
                    if (res.device && res.device.product && res.device.product.deviceType === '车行道闸') {
                        var deviceId = res.device.id
                        console.log(deviceId)

                        let messageObj = getMessageObj(res)
                        // 告警事件
                        this.CreateCarWarningInfo(
                            'CarWarningInfo',
                            deviceId,
                            -724,
                            -767,
                            420,
                            110,
                            window.iotWebConfig?.webUrl +
                                '/pages/common/messageNotice.html?height=110&pageType=car&token=' +
                                web_token +
                                '&projId=' +
                                web_projId +
                                '&title=' +
                                messageObj.title +
                                '&imageContent=' +
                                messageObj.imageContent +
                                '&textContent=' +
                                messageObj.textContent +
                                '&createDateTime=' +
                                messageObj.createDateTime +
                                '&confirmor=' +
                                messageObj.confirmor,
                            3
                        )
                        setTimeout(() => {
                            console.error('关闭车辆进出场弹窗')
                            Fuck('func_html_page', 'CarWarningInfo', 'close_page', null)
                            Fuck('func_html_chrome', 'CarWarningInfo', 'close_page', null)
                        }, 5000)
                    }
                })

                // 当连接关闭时（如刷新页面）
                connection.onclose(async () => {
                    console.log('Connection closed. Retrying...')
                    // 尝试重新连接
                    await startConnection()
                })
            }

            function getMessageObj(res) {
                let content = res.content
                if (content && Array.isArray(content)) {
                    let imageContent = content.find(con => con.contentType === 2 || con.contentType === 3)
                    let imageContentStr = imageContent ? imageContent.content : ''
                    // x.imageContent = imageContentStr.startsWith('http') ? imageContentStr : 'http://192.168.2.13:8883/' + imageContentStr
                    res.imageContent = imageContentStr ? (imageContentStr.startsWith('http') ? imageContentStr : window.iotWebConfig?.iotUrl + '/' + imageContentStr) : ''
                    // x.imageContent = require('../assets/img/face2.png')
                    res.textContent = content
                        .filter(con => con.contentType < 2)
                        .map(c => c.content)
                        .join(';')
                }
                return {
                    title: res.title,
                    imageContent: res.imageContent,
                    textContent: res.textContent,
                    createDateTime: res.createDateTime,
                    confirmor: res.confirmor
                }
            }

            function startConnection() {
                try {
                    this.connection.start()
                    console.log('SignalR Connected.')
                } catch (err) {
                    console.log(err)
                    setTimeout(() => this.startConnection(), 5000) // 每5秒重试一次
                }
            }

            // 创建或者设置一个右侧的数据页面
            // 使用了淡入淡出效果
            function CreateOrSetUIPage2(id, x, y, width, height, source, anchor = 3, transform = '1,1') {
                var arg = {
                    id,
                    x,
                    y,
                    width,
                    height,
                    anchor: anchor,
                    source,
                    transform,
                    blur: true,
                    radius: 6,
                    group: '_RDP_',
                    animation: {
                        name: 'fade+transform',
                        from_x: 24
                    }
                }

                Fuck('func_html_chrome', null, 'create_page', JSON.stringify(arg))
            }

            function CreateCarWarningInfo(id, DeviceID, x, y, width, height, source, anchor = 3, transform = '0.5,0') {
                var arg = {
                    id,
                    x,
                    y,
                    width,
                    height,
                    anchor: anchor,
                    source,
                    transform,
                    blur: true,
                    radius: 6,
                    bind3d: {
                        type: 'entity',
                        target: DeviceID,
                        offset: '0,5,0'
                    },
                    group: '_RDP_',
                    animation: {
                        name: 'fade',
                        from_x: 24
                    }
                }

                Fuck('func_html_chrome', null, 'create_page', JSON.stringify(arg))
            }
        </script>
    </body>
</html>
